<template>
  <view>
    <!-- <page-head :title="title"></page-head> -->
    <!--页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">checkbox多选框</view>
    </view>
    <!--页面标题头end-->
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">默认样式</view>
      <view>
        <checkbox-group>
          <label>
            <checkbox value="cb1" checked="true" />选中
          </label>
          <label>
            <checkbox value="cb" />未选中
          </label>
        </checkbox-group>
      </view>
      <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
      <view>
        <checkbox-group>
          <label>
            <checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选
          </label>
          <label>
            <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
          </label>
          </checkbox-group>
        </view>
        
        <view class="uni-padding-wrap">
          <view class="uni-title uni-common-mt">
            推荐展示样式
            <text>\n使用 uni-list 布局</text>
          </view>
        </view>
        <view class="uni-list">
          <checkbox-group @change="checkboxChange">
            <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
              <view>
                <checkbox :value="item.value" :checked="item.checked" />
              </view>
              <view>{{item.name}}</view>
            </label>
          </checkbox-group>
        </view>
        </view>
        </template>
        
        <script>
        export default {
          data() {
            return {
              title: 'checkbox 复选框',
              items: [{
                value: 'USA',
                name: '美国'
              },
              {
                value: 'CHN',
                name: '中国',
                checked: 'true'
              },
              {
                value: 'BRA',
                name: '巴西'
              },
              {
                value: 'JPN',
                name: '日本'
              },
              {
                value: 'ENG',
                name: '英国'
              },
			   {
			          value: 'FRA',
			          name: '法国'
			        }
			      ]
			    }
			  },
			  methods: {
			    checkboxChange: function (e) {
			      var items = this.items,
			        values = e.detail.value;
			      for (var i = 0, lenI = items.length; i < lenI; ++i) {
			        const item = items[i]
			        if(values.indexOf(item.value) >= 0){
			          this.$set(item,'checked',true)
			        }else{
			          this.$set(item,'checked',false)
			        }
			      }
			    }
			  }
			  </script>

<style>
.uni-list-cell {
	justify-content: flex-start
}
</style>
